<template>
  <ph-view>
    <ph-blockquote type="primary">该组件为独立组件<br/><a href="https://www.npmjs.com/package/ph-progress-bar" target="_blank">npm 地址</a></ph-blockquote>
    <ph-tab>
      <ph-tab-panel title="案例展示">
        <ph-flex dir="col" class="bars">
          <ph-progress-bar
            :value="0"
            :max="100"
            format="当前进度：v/m"
          ></ph-progress-bar>
          <ph-pretty>{{ demo1 }}</ph-pretty>
          <ph-progress-bar
            :value="10"
            :max="100"
            format="进度：%"
          ></ph-progress-bar>
          <ph-pretty>{{ demo2 }}</ph-pretty>
          <ph-progress-bar
            :value="20"
            :max="100"
            format="v/m"
            type="success"
          ></ph-progress-bar>
          <ph-pretty>{{ demo3 }}</ph-pretty>
          <ph-progress-bar
            :value="30"
            :max="100"
            :height="15"
            type="info"
            format="v/m"
            :animate="true"
          ></ph-progress-bar>
          <ph-pretty>{{ demo4 }}</ph-pretty>
          <ph-progress-bar
            :value="40"
            :max="100"
            type="warning"
            format="v/m"
            :animate="true"
          ></ph-progress-bar>
          <ph-pretty>{{ demo5 }}</ph-pretty>
          <ph-progress-bar
            :value="60"
            :max="100"
            :height="15"
            type="info"
            format="v/m"
          ></ph-progress-bar>
          <ph-pretty>{{ demo6 }}</ph-pretty>
          <ph-progress-bar
            :value="70"
            :max="100"
            type="danger"
            format="v/m"
            :animate="true"
            :striped="true"
          ></ph-progress-bar>
          <ph-pretty>{{ demo7 }}</ph-pretty>
          <ph-progress-bar
            :value="100"
            :max="100"
            type="danger"
            format="v/m"
          ></ph-progress-bar>
          <ph-pretty>{{ demo8 }}</ph-pretty>
          <ph-progress-bar
            :value="90"
            :max="100"
            :height="16"
            :animate="true"
            format="v/m"
          ></ph-progress-bar>
          <ph-pretty>{{ demo9 }}</ph-pretty>
          <ph-progress-bar
            :value="3"
            :max="10"
            :height="15"
            type="info"
            format="v/m"
          ></ph-progress-bar>
          <ph-pretty>{{ demo10 }}</ph-pretty>
        </ph-flex>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ basicUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { PhProgressBar, PhBlockquote, PhFlex, PhTab, PhTabPanel, PhView } from "@/index";
import * as Data from "../data/progress";
export default defineComponent({
  components: { PhProgressBar, PhBlockquote, PhFlex, PhTab, PhTabPanel, PhView },
  setup() {
    return {
      ...Data,
    };
  },
});
</script>
<style lang="scss">
.bars > * {
  margin-bottom: 20px;
}
</style>
